<template>
  <div class="work">
    <div class="top-top">
      <el-button style="height: 100%;float: left;margin-right: 2%;" @click="newWork">添加作业</el-button>
      <div style="margin-right: 2%;">
        <el-input v-model="input" style="width: 240px;height: 100%;" placeholder="输入搜索关键词" @keyup.enter="seach"/>
        <el-button @click="seach" style="height: 100%;">
          <template #icon>
            <iconSeach></iconSeach>
          </template>
        </el-button>
      </div>
      <div style="margin-right: 2%;">
        <el-select v-model.number="classValue" placeholder="切换班级" @change="selectClass" style="width: 170px;height: 100%;">
      <el-option
        v-for="item in selectClassValue"
        :key="item.cclassNub"
        :label="item.cclassName"
        :value="item.cclassNub"
      />
    </el-select>
      </div>
      <div style="margin-right: 2%;">
        <el-select v-model.number="courseValue" placeholder="切换课程" @change="selectCourse" style="width: 170px;height: 100%;">
      <el-option
        v-for="item in selectWorkValue"
        :key="item.id"
        :label="item.courseName"
        :value="item.id"
      />
    </el-select>
      </div>
      <div style="margin-right: 2%;">
        <el-radio-group v-model.number="type" @change="status" class="ml-4">
          <el-radio :value=0 size="large">进行中</el-radio>
          <el-radio :value=1 size="large">已结束</el-radio>
        </el-radio-group> 
      </div>
    </div>
    <div class="main">
      <el-table :data="workList" style="width: 100%;" :row-style="{height:'55px'}" :header-row-style="{height:'55px'}" >
        <el-table-column prop="taskName" label="作业名称" class="workList" align="center"/>
        <el-table-column prop="startTime" label="开始时间" class="workList" align="center" />
        <el-table-column prop="endTime" label="作业截止时间" class="workList" align="center"/>
        <el-table-column label="已批阅/提交数" class="workList" align="center" #default="scope">
          {{ scope.row.reviewedSubmissions }}/{{ scope.row.submitCount }}
        </el-table-column>
        <el-table-column prop="studentNumber" label="需要交总数" class="workList" align="center"/>
        <el-table-column prop="averageScore" label="作业平均分" class="workList" align="center"/>
        <el-table-column label="状态" class="workList" align="center" #default="scope">
          <div v-if="scope.row.state==0" style="color:green">进行中</div>
          <div v-else="scope.row.state==1">已结束</div>
        </el-table-column>
        <el-table-column label="操作" align="center" #default="scope">
          <el-button style="border: 0;margin: 0;" @click="lookInfo(scope.row.id,scope.row.taskName)">
            <template #icon>
              <iconBack></iconBack>
            </template>
          </el-button>
          <el-button style="border: 0;margin: 0;" @click="updateWorkInfo(scope.row.id)">
            <template #icon>
              <iconEdit></iconEdit>
            </template>
          </el-button>
          <el-button style="border: 0;margin: 0;" @click="remind(scope.row.id)">
            <template #icon>
              <iconRemind></iconRemind>
            </template>
          </el-button>
          <el-button style="border: 0;margin: 0;" @click="deleteWork(scope.row.id)">
            <template #icon>
              <iconDelete></iconDelete>
            </template>
          </el-button>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :total="total"
          v-model:currentPage="currentPage"
          :page-size="pageSize"
          layout="total,prev,pager,next"
          @current-change="handleCurrentChange"
          />
    </div>
    </div>
  </div>

<!-- 编辑作业弹出框 -->
<el-dialog v-model="dialogFormWork" title="编辑作业" width="500">
  <el-form :model=" updateWorkForm ">
    <el-form-item label="作业名称" >
      <el-input v-model=" updateWorkForm .taskName" autocomplete="off"/>
    </el-form-item>
    <el-form-item >
      <ul style="display: flex;flex-direction: column;">
        
          <li class="updateWork" v-for="(item,index) in  updateWorkForm .list" :key="item.serialNumber" >
            <div style="width: 100%;float: left;">第{{index+1}}题 
              <el-button style="border: 0;margin: 0;" @click="deleteUpdatetimu(item.serialNumber,updateWorkForm.id,item.id)">
            <template #icon>
              <iconDelete></iconDelete>
            </template>
          </el-button>
            </div>
            <div style="width: 100%;float: left;margin-bottom: 3%;">
              <p style="float: left;">题目:&ensp;</p>
              <el-input type="textarea" rows="2" style="width: 100%;float: left;" v-model="item.content"/>
            </div>
            <div style="width: 100%;float: left;margin-bottom: 3%;">
              <p style="float: left;">作业类型:&ensp;</p>
              <el-radio-group v-model.number="item.type" class="ml-4">
                <el-radio :value=0 size="large">问答题</el-radio>
                <el-radio :value=1 size="large">文件题</el-radio>
              </el-radio-group> 
            </div>
        </li>
      </ul>
      <div class="newtimu">
        <el-button type="primary" @click="newtimu">新增题目</el-button>
      </div>
      
    </el-form-item>
    <el-form-item label="开始时间">
      <el-date-picker
        style="width: 100%;"
        v-model=" updateWorkForm .startTime"
        type="datetime"
        placeholder="请选择开始时间"
        format="YYYY-MM-DD HH:mm"
      />
    </el-form-item>
    <el-form-item label="截止时间">
      <el-date-picker
        style="width: 100%;"
        v-model=" updateWorkForm .endTime"
        type="datetime"
        placeholder="请选择截止时间"
        format="YYYY-MM-DD HH:mm"
      />
    </el-form-item>
    <el-form-item label="作业状态" >
      <el-radio-group v-model=" updateWorkForm .state">
    <el-radio :value=0>进行中</el-radio>
    <el-radio :value=1>已结束</el-radio>
  </el-radio-group>
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFormWork = false">取消</el-button>
      <el-button type="primary" @click="submit">
        确认
      </el-button>
    </div>
  </template>
</el-dialog>

<!-- 添加作业弹出框 -->
<el-dialog v-model="newFormWork" title="新增作业" width="500">
  <el-form :model=" updateWorkForm ">
    <el-form-item label="作业名称" >
      <el-input v-model="newWorkForm.taskName" autocomplete="off"/>
    </el-form-item>
    <el-form-item >
      <ul style="display: flex;flex-direction: column;">
        
          <li class="updateWork" v-for="(item,index) in newWorkForm.list" :key="index" >
            <div style="width: 100%;float: left;">第{{index+1}}题 
              <el-button style="border: 0;margin: 0;" @click="deleteNewtimu(item.serialNumber)" v-if="newWorkForm.list.length>1">
            <template #icon>
              <iconDelete></iconDelete>
            </template>
          </el-button>
            </div>
            <div style="width: 100%;float: left;margin-bottom: 3%;">
              <p style="float: left;">题目:&ensp;</p>
              <el-input type="textarea" rows="2" style="width: 100%;float: left;" v-model="item.content"/>
            </div>
            <div style="width: 100%;float: left;margin-bottom: 3%;">
              <p style="float: left;">作业类型:&ensp;</p>
              <el-radio-group v-model.number="item.type" class="ml-4">
                <el-radio :value=0 size="large">问答题</el-radio>
                <el-radio :value=1 size="large">文件题</el-radio>
              </el-radio-group> 
            </div>
        </li>
      </ul>
      <div class="newtimu">
        <el-button type="primary" @click="newWorkNewtimu">新增题目</el-button>
      </div>
      
    </el-form-item>
    <el-form-item label="开始时间">
      <el-date-picker
        style="width: 100%;"
        v-model="newWorkForm.startTime"
        type="datetime"
        placeholder="请选择开始时间"
        value-format="YYYY-MM-DD HH:mm"
      />
    </el-form-item>
    <el-form-item label="截止时间">
      <el-date-picker
        style="width: 100%;"
        v-model="newWorkForm.endTime"
        type="datetime"
        placeholder="请选择截止时间"
        value-format="YYYY-MM-DD HH:mm"
      />
    </el-form-item>
    <el-form-item label="作业状态" >
      <el-radio-group v-model="newWorkForm.state">
    <el-radio :value=0>进行中</el-radio>
    <el-radio :value=1>已结束</el-radio>
  </el-radio-group>
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="newFormWork = false">取消</el-button>
      <el-button type="primary" @click="submitNewWork">
        确认
      </el-button>
    </div>
  </template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref,reactive, onMounted } from 'vue';
import IconEdit from '../../../assets/edit.vue';
import IconSeach from '../../../assets/seach.vue';
import iconDelete from '../../../assets/delete.vue';
import iconBack from '../../../assets/arrow.vue';
import iconRemind from '../../../assets/remind.vue';
import { useRouter } from 'vue-router';
import { createWorkAPI, deleteWorkAPI, getWorkInfoAPI, getWorkListAPI, updataWorkInfoAPI ,remindStudentAPI,getSelectAPI, deleteUpdatetimuAPI} from '../../../api/teacher/work';
import { ElMessage,ElMessageBox } from 'element-plus';

const type=ref(0)
const router=useRouter()
const dialogFormWork=ref(false)
const input=ref('')
const courseValue=ref()
const classValue=ref()
const currentPage=ref(1)
const pageSize=ref(10)
const nextId=ref()
const total = ref(7)
//编辑作业
const  updateWorkForm  = ref({
  id:10,
  taskName: 'dfrytdytdf',
  startTime:'2024-07-06 15:35',
  endTime: '2024-07-06 15:35',
  classId:0,
  courseId:38,
  list:[
  {
    id:1,
    content:'dfdfgfhgfhwf',
    serialNumber:1,
    type:0
  },
  {
    id:2,
    content:'dfwghgfhf',
    serialNumber:2,
    type:0
  },
  {
    id:3,
    content:'dfwf',
    serialNumber:3,
    type:0
  },
  {
    id:4,
    content:'dfwf',
    serialNumber:4,
    type:0
  }
],
  state:0
})

//新增作业
const nextIdOne=ref()
const newFormWork=ref(false)
const newWork=()=>{
  console.log("点击了添加作业")
  newFormWork.value=true
}

const newWorkForm=ref({
  id:null,
  taskName: '',
  startTime:'',
  endTime: '',
  state:0,
  classId:0,
  coursesId:38,
  list:[
  {
    id:0,
    content:'',
    serialNumber:1,
    type:0
  },
]
})

const newWorkNewtimu=()=>{
  nextIdOne.value=Math.max(...newWorkForm.value.list.map(item=>item.serialNumber))+1
  const value={
    id:null,
    content:'',
    serialNumber:nextIdOne.value,
    type:0
  }
  newWorkForm.value.list.push(value)
    // console.log("题目",newWorkForm.value.list)
}
//删除新增作业中的题目
const deleteNewtimu=(id)=>{
  newWorkForm.value.list=newWorkForm.value.list.filter(item=>item.serialNumber!==id)
  console.log("删除新增作业题目的id",id)
}
//遍历数组，让序号变得有序
const sortArray=(array)=>{
  for(let i=0;i<array.length;i++){
    array[i].serialNumber=i+1
  }
  return array
}
//提交完后重置新增列表
const resetNewWorkForm=()=>{
  newWorkForm.value = {
    id: null,
    taskName: '',
    startTime: '',
    endTime: '',
    state: 0,
    classId: 0,
    coursesId: 38,
    list: [
      {
        id: 0,
        content: '',
        serialNumber: 1,
        type: 0
      }
    ]
  };
}

//提交新增作业
const submitNewWork=async()=>{
  if(newWorkForm.value.taskName!=''&&newWorkForm.value.startTime!=''&&newWorkForm.value.endTime!=''){
    newWorkForm.value.classId = classValue.value
    newWorkForm.value.coursesId = courseValue.value
    updateWorkForm.value.list=sortArray(newWorkForm.value.list)
    console.log("新增的作业",newWorkForm.value)
    const result=await createWorkAPI(newWorkForm.value)
    if(result.data.code==200){
      ElMessage.success("新增作业成功！")
      resetNewWorkForm()
      newFormWork.value=false
      getWorkList()
    }else{
      ElMessage.warning("新增作业失败！")
    }
  }else{
    ElMessage.warning("输入框不能为空！")
  }
}

const newtimu=()=>{

  nextId.value=Math.max(... updateWorkForm .value.list.map(item=>item.serialNumber))+1
  const value={
    id:1,
    content:'',
    serialNumber:nextId.value,
    type:0
  }
   updateWorkForm .value.list.push(value)
    console.log("题目", updateWorkForm .value.list)
}
const value1 = ref('2022-02-08')
const selectClassValue = ref([
   {
        cclassNub: 0,
      cclassName: '一班',
   },
   {
        cclassNub: 1,
      cclassName: '二班',
   },
])
const selectWorkValue = ref([
   {
      id: 0,
      courseName: '高数',
   },
   {
      id: 1,
      courseName: '数据结构',
   },
])

const getSelect=async()=>{
  const result=await getSelectAPI()
  console.log("获取到的下拉框的数据",result.data.data)
  selectClassValue.value=result.data.data.classList
  selectWorkValue.value=result.data.data.coursesList
  courseValue.value=result.data.data.coursesList[0].courseNub
  classValue.value=result.data.data.classList[0].cclassNub
}

const workList =ref([])

//获取作业列表
onMounted(()=>{
  getSelect().then(()=>{
    getWorkList()
  })
})

const getWorkList=async()=>{
  const params={
    classId:classValue.value,
    coursesId:courseValue.value,
    pageNo:currentPage.value,
    pageSize:pageSize.value,
    sortBy:null,
    isAsc:true,
    state:type.value,
    taskName:input.value
  }
  console.log("提交到后台的数据",params)
  const result=await getWorkListAPI(params)
  console.log("从后台获取到的数据",result.data.data)
  workList.value=result.data.data.list
  total.value=result.data.data.total
}

//分页
const handleCurrentChange=()=>{
  console.log("当前页码数",currentPage.value)
  getWorkList()
}
const status=()=>{
  console.log("作业状态",type.value)
  getWorkList()

}

const seach=()=>{
  console.log('点击了搜索')
  getWorkList()
}

const selectCourse=()=>{
  console.log("点击了切换课程",courseValue.value)
  getWorkList()
}
const selectClass=()=>{
  console.log("点击了切换班级",classValue.value)
  getWorkList()
}

//获取所修改的作业
const updateWorkInfo=async(id)=>{
  console.log("点击了编辑作业详情",id)
  const result=await getWorkInfoAPI(id)
  updateWorkForm.value=result.data.data
  dialogFormWork.value=true
}

//删除修改作业中的题目
const deleteUpdatetimu=async(timuId: number,workId: number,questionId:number)=>{
  console.log("删除修改作业题目",timuId,workId)
  updateWorkForm.value.list=updateWorkForm.value.list.filter(item=>item.serialNumber!==timuId)
  let params={
    questionId:questionId,
    taskId:workId
  }
  const result=await deleteUpdatetimuAPI(params)
    ElMessage.success("删除成功")
}
//删除作业
const deleteWork=async(id)=>{
  ElMessageBox.confirm(
    '确定删除该学生吗?',
    '删除警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      console.log("点击了删除作业",id)
      const result=await deleteWorkAPI(id)
      if(result.data.code==200){
        ElMessage.success("删除成功")
        getWorkList()
      }else{
        ElMessage.warning("删除失败")
      }
      console.log(result)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}

const lookInfo=(id,name)=>{
  console.log("点击了查看详情",id,name)
  router.push({
    path:'/te-home/workScore',
    query:{
      workId:id,
      workName:name
    }
  })
}

//提醒学生交作业
const remind=async(id)=>{
  console.log("点击了提醒",id)
  const result=await remindStudentAPI(id)
  if(result.data.code==200){
    ElMessage.success("提醒成功！")
  }else{
    ElMessage.warning("提醒失败！")
  }
}

//提交修改的作业
const submit=async()=>{
  if(updateWorkForm.value.taskName!=''&&updateWorkForm.value.startTime!=''&&updateWorkForm.value.endTime!=''){
    updateWorkForm.value.list=sortArray(updateWorkForm.value.list)
    console.log("新增的作业",updateWorkForm.value)
    const result=await updataWorkInfoAPI(updateWorkForm.value)
    if(result.data.code==200){
      ElMessage.success("修改作业成功！")
      getWorkList()
    dialogFormWork.value = false
    }else{
      ElMessage.warning("修改失败")
    }
  }else{
    ElMessage.warning("输入框不能为空！")
  }
}

</script>
<style scoped>
.work{
  height: 100%;
  width: 100%;
  /* background-color: rgb(84, 84, 133); */
}
.top-top{
  width: 100%;
  height: 6%;
  display: flex;
  /* background-color: antiquewhite; */
}
:deep(.el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger){
  height: 100%;
  /* background-color: aqua; */
}
.main{
  width: 100%;
  height: 94%;
  margin-top: 1%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--el-box-shadow-light);
  border-radius:8px;
}
.workList{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.updateWork{
  width: 70%;
  margin-left: 5em;
  list-style: none;

}
.newtimu{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
}
.page{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 1%;
}
:deep(.btn-prev){
  height: 1em;
}
:deep(.number){
  height: 1em;
}
:deep(.btn-next.is-last){
  height: 1em;
}
:deep(.el-pagination){
  height: 1em;
}
:deep(.more.btn-quickprev.el-icon){
  height: 1em;
}
:deep(.more.btn-quicknext.el-icon){
  height: 1em;
}
</style>